<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
        integrity="sha512-oHDEc8Xed4hiW6CxD7qjbnI+B07vDdX7hEPTvn9pSZO1bcRqHp8mj9pyr+8RVC2GmtEfI2Bi9Ke9Ass0as+zpg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />


    <link rel="stylesheet" href="style.css" media="screen" />




    <link href="https://fonts.googleapis.com/css?family=Righteous&subset=latin,latin-ext" rel='stylesheet'
        type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,700" rel='stylesheet' type='text/css'>

    <noscript>
        <style>.body_hide{opacity: 1 !important;}</style>
    </noscript>
</head>

<body class="container body_hide">
    <header class='navbar'>
        <nav>
            <ul>
                <li><a href="/" class="link">svyatoslavsvyatkin</a></li>
                <li><a href="/profiles" class="link">Profiles</a></li>
                <li><a href="/stats" class="link">Statistics</a></li>
            </ul>

            <div class='nav-profile'>
                <img src="https://i.scdn.co/image/ab6775700000ee8509ab7d116e20a0042440d32a">
                <div class='pop'>
                    <a href='/me' class="link">сова с сиськами.</a>
                </div>
            </div>
        </nav>
    </header>

    <main class="row">
        <div class="profile-block">
            
                <div class="profile">
                    <img src='https://i.scdn.co/image/ab6775700000ee8509ab7d116e20a0042440d32a'>
                    <div class="profile-info">
                        <a class="link data-block" href='#'>сова с сиськами</a>
                        <div class="mini-data">
                            <div class="data-block">subscribers : 6</div>
                            <div class="data-block">likes : 1</div>
                        </div>
                        <div class="data-block">не думать это как ездить на электросамокате...........тупой..........</div>
                    </div>
                </div>
                
                <div class="pop-line">
                    <div class="pop pop-data">vk</div>
                    <div class="pop pop-data">discord</div>
                </div>
    
                <div class="header">Favorite genres</div>
                <div class="pop-line">
                    <div class="pop pop-data">hip-hop</div>
                    <div class="pop pop-data">alt</div>
                    <div class="pop pop-data">trap</div>
                    <div class="pop pop-data">metalcore</div>
                    <div class="pop pop-data">emo-rap</div>
                    <div class="pop pop-data">phonk</div>
                </div>
        </div>

        <div class="playing-now">
            <div>Listening now</div>
            <img src="https://i.scdn.co/image/ab67616d0000b273fcb555c87893d9d67f5ee07e">

            <div>
                <div>Markul - Cheat Code</div>
                <div>Album: Sense Of Human</div>
            </div>

        </div>

        

        
            
            <div class="card" style="background-image: url('https://i.scdn.co/image/ab67616d0000b273f80f29db3e08d81e913a6bbb');"> 
                <div class="blur">
                        <div class="card_info">
                            <p>Favourite Track</p>
                        </div>
                        <img 
                            src="https://i.scdn.co/image/ab67616d0000b273f80f29db3e08d81e913a6bbb" 
                            draggable="false">
                        <div class="card_info">
                            <p>Marina, Shokran, Jeremiah Kane - Bathyscaph</p>
                        </div>
                </div>
                
            </div>
        
        
            
            <div class="card"  style="background-image: url('https://i.scdn.co/image/ab6761610000e5eb2e34267cb57ce4cf3b1a436e');"> 
                
                <div class="blur">
                        <div class="card_info">
                            <p>Favourite Artist</p>
                        </div>
                        <img 
                            src="https://i.scdn.co/image/ab6761610000e5eb2e34267cb57ce4cf3b1a436e" 
                            draggable="false">
                        <div class="card_info">
                            <p>Wildways</p>
                        </div>
                </div>
                
            </div>
        
    </main>

    <footer class="footer">
        <div class="column footer-block">
            <div>Copyright © 2021</div>
            <div>All rights reserved.</div>
            <div>Not affiliated with Spotify</div>
        </div>
        <div class="column footer-block">
            <a href="/" class="link">svyatoslavsvyatkin</a>
        </div>
        <div class="column footer-block">
            <a href="#" class="link">Terms of service</a>
            <a href="#" class="link">Privacy policy</a>
        </div>
    </footer>

    <script src="script.js"></script>
</body>

</html>